<template>
  <div class="box">
    <header class="header">
      <button>&lt;</button>
      <button>x</button>
    </header>
    <div class="content">
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item><img src="https://img.zhichiwangluo.com/zcimgdir/album/file_5d28518b03b0c.png" style="width:100%" alt=""></van-swipe-item>
        <van-swipe-item><img src="https://img.zhichiwangluo.com/zcimgdir/album/file_5d28518d453d1.png" style="width:100%" alt=""></van-swipe-item>
      </van-swipe>
      <div class="methods">
        <div class="first">
          <dl>
            <dt><img src="https://img.zhichiwangluo.com/zcimgdir/album/file_5b97cbeeb4989.png" alt=""></dt>
            <dd>
              <h2>店内买单</h2>
              <p>畅享更多优惠</p>
              </dd>
          </dl>
        </div>
        <div class="another">
          <dl>
            <dt><img src="https://img.zhichiwangluo.com/zcimgdir/album/file_5b97cbeeb4989.png" alt=""></dt>
            <dd>
              <h2>外卖速达</h2>
              <p>上门更方便</p>
              </dd>
          </dl>
        </div>
      </div>
      <div class="news">
        <p>
          <i class="iconfont icon-mendianxinxi"></i>
          <span>第二杯半价哦！！！</span>
        </p>
      </div>
      <div class="link">
        <ul>
          <li><img src="http://img.zhichiwangluo.com/zcimgdir/thumb/t_15264395715afb9e932aedd.jpg" alt=""></li>
          <li>
            <p>你的专属奶茶店</p>
            <p>深圳市南山区软件基地芒果网大厦</p>
          </li>
          <li><img src="
          http://img.zhichiwangluo.com/zcimgdir/album/file_5afa820166c84.png" alt=""></li>
        </ul>
      </div>
      <div class="kind">
        <ul>
          <li>
            <img src="https://img.zhichiwangluo.com/zcimgdir/album/file_5d2efc714a60d.png" alt="">
            <span>我要买单</span>
          </li>
           <li>
            <img src="https://img.zhichiwangluo.com/zcimgdir/album/file_5d2efd71531e6.png" alt="">
            <span>优惠券</span>
          </li>
           <li>
            <img src="https://img.zhichiwangluo.com/zcimgdir/album/file_5d2efc6920ce9.png" alt="">
            <span>储存有礼</span>
          </li>
           <li>
            <img src="https://img.zhichiwangluo.com/zcimgdir/album/file_5d2efc6d48898.png" alt="">
            <span>会员卡</span>
          </li>
           <li>
            <img src="https://img.zhichiwangluo.com/zcimgdir/album/file_5d2efc6bcf8a8.png" alt="">
            <span>优先排队</span>
          </li>
        </ul>
      </div>
      <div class="shopactive">
        <div class="top">
          <dl>
          <dt><img src="https://img.zhichiwangluo.com/zcimgdir/album/file_5b72a928be307.png" alt=""></dt>
          <dd>
            <h3>店铺活动</h3>
            <p>Shop activities </p>
          </dd>
        </dl>
        </div>
        <div class="bottom">
          <ul>
            <li style="background-image:url(https://img.zhichiwangluo.com/zcimgdir/album/file_5b839f181d478.png)">
              <h3>转出美味</h3>
              <p>邀你一起开心大转盘</p>
              <img src="https://img.zhichiwangluo.com/zcimgdir/album/file_5d414c95d4ae5.png" alt="">
            </li>
            <li style="background-image:url(https://img.zhichiwangluo.com/zcimgdir/album/file_5b839f0f6fc08.png)">
              <h3>优惠拼团</h3>
              <p>实惠大划算</p>
              <img src="https://img.zhichiwangluo.com/zcimgdir/album/file_5d414c9310ac9.png" alt="">
            </li>
          </ul>
        </div>
      </div>
      <div class="hotsale">
        <div class="top">
          <dl>
          <dt><img src="https://img.zhichiwangluo.com/zcimgdir/album/file_5b72a928be307.png" alt="##"></dt>
          <dd>
            <h3>今日热销</h3>
            <p>Hot sale today</p>
          </dd>
        </dl>
        </div>
        <!-- 引入商品组件 -->
        <Prolist :prolist="prolist"></Prolist>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Vue from 'vue'
import { Swipe, SwipeItem } from 'vant'
import Prolist from '@/components/Prolist.vue'
Vue.use(Swipe).use(SwipeItem)
export default {
  components: {
    Prolist
  },
  data () {
    return {
      prolist: []
    }
  },
  created () {
    axios.get('/pro').then(res => {
      // console.log(res.data.data)
      this.prolist = res.data.data
    })
  }
}
</script>
<style lang="scss">
  @import "@/lib/reset.scss";
  .header{
    @include rect(0.5rem, 100%);
    @include flexbox();
    @include justify-content(space-between);
    @include align-self();
    button{
      &:nth-child(1){
        @include margin(0.07rem 0 0 0.2rem);
        @include display(inline-block);
        @include rect(0.4rem, 0.3rem);
        @include border-radius(0.2rem)
      }
      &:nth-child(2){
        @include margin(0.07rem 0.2rem 0 0);
        @include display(inline-block);
        @include rect(0.4rem, 0.3rem);
        @include border-radius(0.2rem)
      }
    }
  }
  .content{
    .methods{
       @include flexbox();
       @include justify-content(space-around);
       .first{
          @include rect(1.43rem,0.74rem);
          @include background-color(#ccc);
          @include border-radius(0.1rem);
          dl{
             @include flexbox();
             @include justify-content(space-around);
             @include margin(0.2rem 0 0 0 );
            img{
             @include rect(0.4rem, 0.53rem);
          }
          h2{
            @include font-size(15px);
            @include color(rgb(48, 84, 181));
            @include font-weight(blod);
          }
          p{
            @include font-size(12px);
            @include color(rgb(170, 184, 212));
          }
          }
       }
       .another{
           @include rect(1.43rem,0.74rem);
          @include background-color(#ccc);
          @include border-radius(0.1rem);
          dl{
             @include flexbox();
             @include justify-content(space-around);
             @include margin(0.2rem 0 0 0 );
            img{
             @include rect(0.4rem, 0.53rem);
          }
          h2{
            @include font-size(15px);
            @include color(rgb(48, 84, 181));
            @include font-weight(blod);
          }
          p{
            @include font-size(12px);
            @include color(rgb(170, 184, 212));
          }
          }
       }
    }
  .news{
    @include rect(100%, 0.4rem);
    @include line-height(0.4rem);
    i {
      @include margin(0 0 0 0.2rem);
      @include color(orange);
    }
    span {
      @include margin(0 0 0 0.1rem);
    }
  }
  .link{
     @include rect(100%, 0.9rem);
     @include margin(0 auto);
     @include flexbox();
     @include align-items();
     ul{
     @include margin(0);
     @include rect(3rem, 0.7rem);
     @include margin(0 auto);
     @include flexbox();
     @include align-items();
     @include justify-content(space-around);
    //  @include border(1px solid #ccc);
     @include box-shadow(rgb(228, 230, 239) 0px 0px 7px);
     @include border-radius(0.1rem);
     li{
       &:nth-child(1){
         img{
           @include rect(0.44rem, 0.44rem);
           @include border-radius(50%);
         }
       }
        &:nth-child(2){
        p{
           &:nth-child(1){
             @include font-size(14px);
             @include color(black);
             @include margin(0 0 0.1rem 0.15rem)
           }
           &:nth-child(2){
             @include font-size(12px);
             @include color(#ccc);
             @include margin(0 0.15rem 0)
           }
        }
       }
        &:nth-child(3){
         img{
           @include rect(0.2rem, 0.2rem);
         }
       }
     }
     }
  }
  .kind{
    @include rect(100%, 0.9rem);
    @include margin(0 auto);
    @include flexbox();
    @include align-items();
    ul{
     @include rect(3.2rem, 0.7rem);
     @include margin(0 auto);
     @include flexbox();
     @include align-items();
     @include justify-content(space-around);
     li{
       @include rect(100%, 100%);
       @include flexbox();
       @include flex-direction(column);
       @include align-items();
       @include justify-content(space-around);
       img{
         @include rect(0.32rem,0.32rem);
         @include display(block);
       }
       span{
         @include font-size(12px)
       }
     }
    }
  }
  .shopactive{
    .top{
      @include rect(100%,0.6rem);
      @include margin(0 auto);
      @include flexbox();
      @include align-items();
      @include justify-content();
      dl{
        @include flexbox();
        dt{
          img{
            @include rect(0.22rem,0.22rem)
          }
        };
        dd{
          h3{
            @include font-size(14px);
          };
          p{
            @include font-size(11px);
            @include color(#ccc);
          };
        }
      }
    }
    .bottom{
       @include rect(100%, 1.524rem);
      ul{
        @include flexbox();
        @include rect(3.2rem, 1.42rem);
        @include margin(0 auto);
        @include justify-content(space-between);
        li{
          @include rect(1.46rem, 1.42rem);
          @include flexbox();
          @include flex-direction(column);
          @include align-items();
          @include justify-content();
          h3{
          @include font-size(14px);
          }
          p{
          @include font-size(12px);
          @include color(#999);
          }
          img{
          @include rect(0.79rem, 0.86rem);
          }
        }
      }
    }
  }
  .hotsale{
    .top{
      @include rect(100%,0.6rem);
      @include margin(0 auto);
      @include flexbox();
      @include align-items();
      @include justify-content();
      dl{
        @include flexbox();
        dt{
          img{
            @include rect(0.22rem,0.22rem)
          }
        };
        dd{
          h3{
            @include font-size(14px);
            };
          p{
            @include font-size(11px);
            @include color(#ccc);
          };
        }
      }
    }
  }
  }
</style>
